<template>
    <div class="x-card" :style="{width:props.width}">
        <div class="header">{{props.title}}</div>
        <div class="content">
            <slot name="default"></slot>
        </div>
        <div class="footer" v-if="slot.footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useSlots } from "vue"

const slot = useSlots()
const props = defineProps({
  title: String,
  width: {
    type: String,
    default: "fit-content"
  }
})
</script>
<style lang="less" scoped>
.x-card{
    margin: 20px 0;
    border-radius: @smallShadow;
    box-shadow: @smallShadow;
    padding: 10px 20px;
    border: 1px solid @borderColor;
    .header{
        height: @middleHeight;
        line-height: @middleHeight;
        border-bottom: 1px solid @borderColor;
    }
    .content,.footer{
        padding: 10px 0;
    }
    .footer{
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
